<template>
  <Modal
    v-model:visible="visible"
    title="修改IAM账号信息"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="closeModal"
    :destroy-on-close="true"
  >
    <template #footer>
      <Button key="submit" type="primary" @click="handleSubmit">确认</Button>
      <Button key="back" @click="closeModal">返回</Button>
    </template>
    <Form :model="formState" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" :rules="iamRules">
      <FormItem v-show="false" name="id">
        {{ formState.id }}
      </FormItem>
      <FormItem name="iamName" label="账号名">
        <Input v-model:value="formState.iamName" name="iamName" placeholder="请输入账号名" @change="onChange"> </Input>
      </FormItem>
      <FormItem name="ak" label="AK">
        <InputPassword v-model:value="formState.ak" name="ak" placeholder="请输入AK" @change="onChange">
        </InputPassword>
      </FormItem>
      <FormItem name="sk" label="SK" v-if="!editable1" :rules="[]">
        ******<Button type="link" @click="handleEditable(1)"><EditOutlined /></Button>
      </FormItem>
      <FormItem name="sk" label="SK" v-if="editable1">
        <InputPassword v-model:value="formState.sk" name="sk" placeholder="请输入SK" @change="onChange">
        </InputPassword>
      </FormItem>
      <FormItem name="password" label="密码" v-if="!editable2" :rules="[]">
        ******<Button type="link" @click="handleEditable(2)"><EditOutlined /></Button>
      </FormItem>
      <FormItem name="password" label="密码" v-if="editable2">
        <InputPassword v-model:value="formState.password" name="password" placeholder="请输入密码" @change="onChange">
        </InputPassword>
      </FormItem>
    </Form>
  </Modal>
</template>
<script lang="ts" setup>
import { Modal, message, Button, Form, FormItem, Input, InputPassword } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { updateSaaSIam } from '/@/api/system-mgmt/system';
import { SaaSIamAccountUpdateForm } from '/@/api/system-mgmt/model/systemModel';
import { EditOutlined } from '@ant-design/icons-vue';
import { iamRules } from '/@/views/system-mgmt/iam-account/iam.data';
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const emit = defineEmits(['success', 'register']);
const editable1 = ref(false);
const editable2 = ref(false);
const formState = reactive({
  id: '',
  password: undefined,
  ak: undefined,
  sk: undefined,
  iamName: undefined,
});
let origin: SaaSIamAccountUpdateForm = {
  id: '',
  password: undefined,
  ak: undefined,
  sk: undefined,
  iamName: undefined,
};
let updateParam = {
  id: '',
  password: null,
  ak: null,
  sk: null,
  iamName: null,
};
const showModal = async (record: Recordable) => {
  formState.id = record.id;
  formState.ak = record.ak;
  formState.iamName = record.iamName;
  origin.ak = record.ak;
  origin.sk = record.sk;
  origin.id = record.id;
  origin.iamName = record.iamName;
  origin.password = record.password;
  updateParam.id = record.id;
  visible.value = true;
};

const onChange = (e) => {
  let index: string = e.target.name;
  if (e.target.value && e.target.value == origin[index]) {
    updateParam[index] = null;
  } else {
    updateParam[index] = formState[index];
  }
};
const handleEditable = (flag: number) => {
  if (flag == 1) {
    editable1.value = true;
  } else if (flag == 2) {
    editable2.value = true;
  }
};
const formRef = ref();
const closeModal = () => {
  editable1.value = false;
  editable2.value = false;
  visible.value = false;
  formRef.value.clearValidate();
};

function handleSubmit() {
  formRef.value.validate().then(async () => {
    try {
      confirmLoading.value = true;
      const res = await updateSaaSIam(updateParam);

      if (res === '更新IAM账号成功') {
        message.success('IAM账号信息编辑成功！');
      } else {
        message.error('IAM账号信息编辑失败！');
      }
      closeModal();
      emit('success');
    } finally {
      confirmLoading.value = false;
    }
  });
}

defineExpose({ showModal });
</script>
